<template lang="html">
  <div class="list">
    <div class="list_header">
      <div class="back" @click="back()">
        <img src="../../static/img/houtui.png" />
      </div>
      <div @click='change(1)' class="fenlei" :class="{'active':id==1}">
        	分类
      </div>
      <div @click='change(2)' class="pinpai" :class="{'active':id==2}">
        	品牌
      </div>
    </div>
    <div class="content">
      <div class="" v-if='id == 1'>
        	<Fen1></Fen1>
      </div>
      <div class="" v-else>
        	<fen2></fen2>
      </div>
    </div>
  </div>
</template>
<script>
import My from '../pages/first'
import Fen1 from '../components/fen1'
import fen2 from '../components/fen2'
export default {
  data() {
    return {
      id:'1'
    }
  },
	methods:{
    change(id) {
      this.id = id;
    },
    back(){
      // 因为在组件中用锚点链接设置了侧边栏的字母检索（修改了url地址）  所以如果此时这个返回还用原来的back方法 就会一步一步往上一级url退  所以这里直接修改url 直接返回到一级路由中
    	this.$router.push({path:'./first'})
    }
	},
	components:{
		Fen1,
		fen2,
		My
	}
}
</script>

<style lang="css">
	.list {
	  width: 100%;
	}
  .list .list_header {
    width: 100%;
    height: .8rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    border-bottom: .01rem solid gray;
    position: fixed;
    left:0;
    top:0;
    z-index: 100;
  }
  .list_header .back {
    width: 10%;
  }
  .list_header .back img {
    width: 50%;
  }
  .list_header .fenlei,.list_header .pinpai {
    width: 40%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .21rem;
    border:.001rem solid gainsboro;
    font-weight: bold;
    margin-left:-5%;
  }
  .list_header .pinpai{
  	margin-left:-10%;
  }
  .active{
  	background: gainsboro;
  }
</style>
